<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>机构资料</title>
    <!-- 引入 Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
            }
            .card-shadow-hover {
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .text-balance {
                text-wrap: balance;
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-b from-neutral-50 to-neutral-100 text-neutral-700 min-h-screen flex flex-col">

<!-- 顶部导航栏 - 保持不变 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <!-- Logo -->
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-heart-o text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">爱心志愿者平台</span>
                </a>
            </div>

            <!-- 主导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="${pageContext.request.contextPath}/organization/home" class="text-primary font-medium hover:text-primary/80 transition-custom border-b-2 border-primary">首页</a>
                <a href="${pageContext.request.contextPath}/organization/profile" class="text-neutral-500 font-medium hover:text-primary transition-custom">机构资料</a>
                <a href="${pageContext.request.contextPath}/organization/guanli" class="text-neutral-500 font-medium hover:text-primary transition-custom">活动管理</a>

            </nav>

            <!-- 用户信息和操作 -->
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button class="flex items-center text-neutral-500 hover:text-primary transition-custom" id="notificationBtn">
                        <i class="fa fa-bell-o text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="relative group">
                    <button class="flex items-center space-x-2 focus:outline-none" id="userMenuBtn">
                        <img src="${pageContext.request.contextPath}/${organizations.logo != null ? organizations.logo : 'static/images/default-logo.png'}" alt="机构Logo" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                        <span class="hidden md:block text-sm font-medium">${organizations.orgName}</span>
                        <i class="fa fa-angle-down text-neutral-400 group-hover:text-primary transition-custom"></i>
                    </button>

                    <!-- 用户下拉菜单 -->
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 transform origin-top-right scale-95 group-hover:scale-100">
                        <a href="/organization/profile" class="block px-4 py-2 text-sm text-neutral-600 hover:bg-primary hover:text-white transition-custom">
                            <i class="fa fa-building mr-2"></i>机构资料
                        </a>

                        <div class="border-t border-neutral-200 my-1"></div>
                        <a href="${pageContext.request.contextPath}/index.jsp" class="block px-4 py-2 text-sm text-red-500 hover:bg-red-50 transition-custom">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <button type="button" class="md:hidden text-neutral-500 hover:text-primary focus:outline-none" id="mobileMenuBtn">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- 优化后的主体内容区域 -->
<main class="flex-grow container mx-auto px-4 py-12 lg:py-16">
    <!-- 页面标题区域 -->
    <div class="text-center mb-12 md:mb-16">
        <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-neutral-800 mb-3">机构资料</h1>
        <p class="text-neutral-500 max-w-2xl mx-auto text-balance">查看和管理您的机构信息，让志愿者更好地了解你们的使命与服务</p>
    </div>

    <!-- 机构资料卡片 -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- 左侧机构信息卡片 -->
        <div class="lg:col-span-8">
            <div class="bg-white rounded-2xl card-shadow overflow-hidden transition-all duration-300 hover:card-shadow-hover">
                <!-- 机构头部信息 -->
                <div class="relative h-48 md:h-64 bg-primary/5">
                    <div class="absolute inset-0 bg-gradient-to-r from-primary/20 to-transparent"></div>
                    <div class="relative h-full flex items-end p-6 md:p-8">
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-800">${organizations.orgName}</h2>
                    </div>
                </div>

                <!-- 机构详情信息 -->
                <div class="p-6 md:p-8">
                    <!-- 机构Logo -->
                    <div class="flex justify-center md:justify-start -mt-16 mb-8">
                        <div class="relative">
                            <img src="${organizations.logo}" alt="机构Logo" class="h-24 w-24 md:h-32 md:w-32 rounded-2xl border-4 border-white card-shadow animate-float">
                            <div class="absolute -bottom-2 -right-2 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full">
                                <i class="fa fa-certificate mr-1"></i>已认证
                            </div>
                        </div>
                    </div>

                    <!-- 机构信息列表 -->
                    <div class="space-y-6">
                        <!-- 机构类型 -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mt-1">
                                <i class="fa fa-sitemap text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-neutral-500 mb-1">机构类型</h3>
                                <p class="text-base font-medium text-neutral-800">${organizations.orgType}</p>
                            </div>
                        </div>

                        <!-- 联系方式 -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mt-1">
                                <i class="fa fa-phone text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-neutral-500 mb-1">联系方式</h3>
                                <p class="text-base font-medium text-neutral-800">${organizations.contactPhone}</p>
                            </div>
                        </div>

                        <!-- 机构地址 -->
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mt-1">
                                <i class="fa fa-map-marker text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-semibold text-neutral-500 mb-1">机构地址</h3>
                                <p class="text-base font-medium text-neutral-800">${organizations.address}</p>
                            </div>
                        </div>

                        <!-- 机构简介 -->
                        <div class="pt-4 border-t border-neutral-100">
                            <h3 class="text-sm font-semibold text-neutral-500 mb-3">机构简介</h3>
                            <p class="text-neutral-700 leading-relaxed">${organizations.description}</p>
                        </div>
                    </div>
                </div>

                <!-- 底部操作按钮 -->
                <div class="px-6 md:px-8 pb-6 flex justify-end space-x-3">
                    <a href="${pageContext.request.contextPath}/organization/updateProfile" class="px-5 py-2.5 bg-white border border-primary text-primary rounded-lg font-medium hover:bg-primary/5 transition-custom">
                        <i class="fa fa-edit mr-2"></i>编辑资料
                    </a>
                    <a href="${pageContext.request.contextPath}/organization/home" class="px-5 py-2.5 bg-white border border-primary text-primary rounded-lg font-medium hover:bg-primary/5 transition-custom">
                        <i class="fa fa-edit mr-2"></i>返回首页
                    </a>
                </div>
            </div>
        </div>

        <!-- 右侧统计信息卡片 -->
        <div class="lg:col-span-4 space-y-6">
            <!-- 机构数据统计卡片 -->
            <div class="bg-white rounded-2xl card-shadow overflow-hidden transition-all duration-300 hover:card-shadow-hover">
                <div class="p-6 md:p-8">
                    <h3 class="text-lg font-bold text-neutral-800 mb-6">机构数据</h3>

                    <div class="space-y-6">
                        <!-- 志愿者数量 -->
                        <div class="flex items-center justify-between p-4 bg-neutral-50 rounded-xl">
                            <div>
                                <p class="text-sm text-neutral-500">注册志愿者</p>
                                <p class="text-2xl font-bold text-neutral-800">${volunteerCount}</p>
                            </div>
                            <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center text-green-500">
                                <i class="fa fa-users text-xl"></i>
                            </div>
                        </div>

                        <!-- 活动数量 -->
                        <div class="flex items-center justify-between p-4 bg-neutral-50 rounded-xl">
                            <div>
                                <p class="text-sm text-neutral-500">已发布活动</p>
                                <p class="text-2xl font-bold text-neutral-800">${activityCount}</p>
                            </div>
                            <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
                                <i class="fa fa-calendar-check-o text-xl"></i>
                            </div>
                        </div>

                        <!-- 服务时长 -->
                        <div class="flex items-center justify-between p-4 bg-neutral-50 rounded-xl">
                            <div>
                                <p class="text-sm text-neutral-500">总服务时长</p>
                                <p class="text-2xl font-bold text-neutral-800">${serviceHours} 小时</p>
                            </div>
                            <div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
                                <i class="fa fa-clock-o text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 机构认证卡片 -->
            <div class="bg-white rounded-2xl card-shadow overflow-hidden transition-all duration-300 hover:card-shadow-hover">
                <div class="p-6 md:p-8">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
                            <i class="fa fa-check text-lg"></i>
                        </div>
                        <h3 class="text-lg font-bold text-neutral-800">机构认证</h3>
                    </div>

                    <div class="bg-green-50 border border-green-100 rounded-xl p-5">
                        <p class="text-sm text-green-700 mb-4">
                            <i class="fa fa-info-circle mr-2"></i>您的机构已通过平台认证，认证信息真实可靠，志愿者可以放心参与您的活动。
                        </p>

                        <div class="space-y-3">
                            <div class="flex items-center">
                                <div class="h-6 w-6 rounded-full bg-green-100 flex items-center justify-center text-green-500 text-xs mr-3">
                                    <i class="fa fa-check"></i>
                                </div>
                                <span class="text-sm text-neutral-700">营业执照已验证</span>
                            </div>

                            <div class="flex items-center">
                                <div class="h-6 w-6 rounded-full bg-green-100 flex items-center justify-center text-green-500 text-xs mr-3">
                                    <i class="fa fa-check"></i>
                                </div>
                                <span class="text-sm text-neutral-700">办公地址已核实</span>
                            </div>

                            <div class="flex items-center">
                                <div class="h-6 w-6 rounded-full bg-green-100 flex items-center justify-center text-green-500 text-xs mr-3">
                                    <i class="fa fa-check"></i>
                                </div>
                                <span class="text-sm text-neutral-700">联系人信息已认证</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- JavaScript 脚本 -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });

        // 移动端菜单交互
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', function() {
                const nav = document.querySelector('nav.md\\:flex');
                nav.classList.toggle('hidden');
                nav.classList.toggle('flex');
                nav.classList.toggle('flex-col');
                nav.classList.toggle('absolute');
                nav.classList.toggle('top-16');
                nav.classList.toggle('left-0');
                nav.classList.toggle('right-0');
                nav.classList.toggle('bg-white');
                nav.classList.toggle('p-4');
                nav.classList.toggle('space-y-4');
                nav.classList.toggle('space-x-8');
            });
        }
    </script></main>
</body>
</html>